<template>
	<!-- 需求页 -->
	<view class="container">
		<!-- 轮播图 -->
		<view class="u-p-l-20 u-p-r-20">
			<u-swiper  :list="swiperList" height="300"></u-swiper>
		</view>

		<!-- 通知 -->
		<view class="noticeContainer u-p-t-10 u-p-b-10">
			<u-notice-bar mode="horizontal" bg-color="#fff" color="#000" speed="200" font-size="30" :list="noticeList">
			</u-notice-bar>
		</view>

		<!-- tab 选项-->
		<view class="tabContainer u-p-10">
			<u-tabs :list="tabList" bg-color="#eee" :show-bar="false" :height="50" :active-item-style="activeItemStyle"
				:current="current" @change="changeTab"></u-tabs>
		</view>

		<!-- 内容 -->
		<view class="u-p-l-20 u-p-r-20" style="background-color: #eee;">
			<scroll-view class="contentContainer" :scroll-y="true" :refresher-enabled="true" refresher-background="#fff"
				:refresher-triggered="refresherFlag" @refresherpulling="onPulling" @refresherrefresh="refresherrefresh">
				<view class="contentItem" v-for="item in 20" :key="item">
					<u-row class="Myrow" gutter="0">
						<u-col span="6">
							<view class="title u-font-32 u-line-1 u-m-l-20">小小程序小程序小程序小程序程序</view>
						</u-col>
						<u-col span="6">
							<view class="mode u-text-right u-font-30 u-m-r-20">面议</view>
						</u-col>
					</u-row>
					<u-row class="Myrow" gutter="0">
						<u-col span="6">
							<view class="tags u-m-l-20">
								<u-tag border-color="#fff" class="u-m-r-10" type="info" size="mini" text="电脑端"></u-tag>
								<u-tag border-color="#fff" type="info" size="mini" text="不限地区"></u-tag>
							</view>
						</u-col>
						<u-col span="6">
							<view class="date u-text-right u-font-26 u-m-r-20">2021-11-18</view>
						</u-col>
					</u-row>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [
					'/static/images/1.jpeg',
					'/static/images/2.jpeg'
				], // 轮播图数据
				noticeList: ['本平台只提供开发订单,如交易过程中出现任何纠纷,本平台概不负责!每日更新20-30最新需求'], // 通知数据
				tabList: [{
						name: '全部'
					},
					{
						name: 'HTML5'
					},
					{
						name: '小程序'
					}, {
						name: '脚本源码'
					}, {
						name: '手机端'
					}, {
						name: '电脑端'
					},
					{
						name: '其它'
					}
				], // tab选项数据
				current: 0, // 当前选中的项
				activeItemStyle: {
					backgroundColor: '#2979ff',
					// height: '60rpx',
					// lineHeight: '60rpx',
					// marginBottom: '10rpx',
					borderRadius: '30rpx',
					color: '#fff'
				}, // 当前激活tab选项卡样式
				refresherFlag: false, // 下拉刷新标识
			}
		},
		onLoad() {

		},
		methods: {
			// 切换tab选项卡
			changeTab(index) {
				this.current = index;
			},
			// 下拉刷新
			refresherrefresh() {
				setTimeout(() => {
					this.refresherFlag = false
					console.log(11111)
				}, 2000)
			},
			onPulling() {
				this.refresherFlag = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {

		// 通知
		.noticeContainer {
			background-color: #fff;
		}

		// tab选项卡
		.tabContainer {
			// background-color: #eee;
		}

		// 内容区
		.contentContainer {
			height: calc(100vh - 484rpx);

			// margin: 0 20rpx;
			.contentItem {
				background-color: #fff;
				height: 140rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.Myrow {
					height: 70rpx;
					line-height: 70rpx;
					// padding: 0 20rpx;
				}

				.title {
					font-weight: bold;
				}

				.mode {
					font-weight: bold;
					color: #2979FF;
				}
			}

		}
	}
</style>
